<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li
          v-for="(item, index) in movies"
          :class="{active: currentIndex === index}"
          @click="liClick(index)"
        >
          {{index}}.{{item}}
        </li>
      </ul>
    </div>

    <script src="vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          movies: ["海王", "海贼王", "加勒比海盗", "海尔兄弟"],
          currentIndex: 0,
        },
        methods: {
          liClick(index) {
            this.currentIndex = index;
          },
        },
      });
    </script>
  </body>
</html>
